<template>
  <div>
      <header class="h">
      <p>
        <span><img src="../assets/@5Z%UK(_UU[F%M[}5ZH@X_K.png" alt="">东城区北京市政府</span>
        <span class="p">

         <section> <h2>-3</h2>
          <p>晴夜</p></section>
        <img src="//fuss10.elemecdn.com/e/85/614c1229282673bb8609909812e76png.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/" alt=""> 
        </span>
      </p>
      </header>
     <section class="inp">
      <a href="https://h5.ele.me/search/#/"><input type="text" placeholder="搜索商家名称"></a>
     </section>
    
    
    
    
  <swiper :options="swiperOption" ref="mySwiper" class="sww">
    <!-- slides -->
    <swiper-slide>奶茶</swiper-slide>
    <swiper-slide>扁豆焖面</swiper-slide>
    <swiper-slide>炒饼</swiper-slide>
    <swiper-slide>水果39减20</swiper-slide>
    <swiper-slide>煲仔饭</swiper-slide>
    <swiper-slide>凉皮</swiper-slide>
    <swiper-slide>粥</swiper-slide>
     <swiper-slide>水果39减20</swiper-slide>
    <swiper-slide>煲仔饭</swiper-slide>
    <swiper-slide>凉皮</swiper-slide>
    <swiper-slide>粥</swiper-slide>
    <!-- Optional controls -->
    <!-- <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> -->
    <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>

    






<section class="cen">
      <swiper :options="swiperOptio" ref="mySwiper">
    <!-- slides -->
    <swiper-slide>
      <div class="sw"> 
          <div class="div">
            <img src="//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>美食</p>
          </div>

          <div class="div">
            <img src="//fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>晚餐</p>
          </div>


          <div class="div">
            <img src="//fuss10.elemecdn.com/c/3c/0184f5b3fa72f295fc01864734218jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>商超便利</p>
          </div>




          <div class="div">
            <img src="//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>果蔬生鲜</p>
          </div>

      
     </div> 

     <div class="sw">
        <div class="div">
            <img src="//fuss10.elemecdn.com/1/a5/b4aa9dd27ff21d0a76bb0da550fd7jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>炸鸡烤串</p>
          </div>

          <div class="div">
            <img src="//fuss10.elemecdn.com/6/74/785eafaf358fa6b18df37c64c3510jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>大牌五折</p>
          </div>


          <div class="div">
            <img src="//fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>甜品饮品</p>
          </div>




          <div class="div">
            <img src="//fuss10.elemecdn.com/b/e1/58aa34ef194d216c9f2328f603588jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>医药健康</p>
          </div>

      </div>
    </swiper-slide>








    <swiper-slide>
         <div class="sw"> 
          <div class="div">
            <img src="//fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>浪漫鲜花</p>
          </div>

          <div class="div">
            <img src="//fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>麻辣烫</p>
          </div>


          <div class="div">
            <img src="//fuss10.elemecdn.com/7/43/0947110c24c620a767745054d798bjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>地方菜系</p>
          </div>




          <div class="div">
            <img src="//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>披萨意面</p>
          </div>

      
     </div> 

     <div class="sw">
        <div class="div">
            <img src="//fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
             <p>新店特惠</p>
          </div>

         


      </div>
    </swiper-slide>
    
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div> --> -->
    <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
  </swiper>
    </section>
        






        <section class="cen_">
          <img src="https://fuss10.elemecdn.com/3/c8/45b2ec2855ed55d90c45bf9b07abbpng.png?imageMogr/format/webp/thumbnail/!710x178r/gravity/Center/crop/710x178/" alt="">
        </section>


      <div class="box">
        <p>---推荐商家---</p>
      </div>
       <section v-for="(v,i) in list" :key="i" class="box-">
           
        <div class="div--">
    
          <a :href="v.day"><img :src="v.img" alt=""></a> 
           
            </div>


            <div class="rig">
           <p>
             <span class="span">{{v.path}}</span>
             <span>{{v.name1}}</span>
             <span>{{v.name2}}</span>
           </p>
          
          <p>
             <img :src="v.img2" alt="">
             <span>{{v.name3}}</span>
           </p>
           <p class="p_">
             <span>{{v.name4}}</span>
             <span>{{v.name5}}</span>
           </p>


  <p>
              <span style="background-color: rgb(241, 136, 79);">{{v.name6}}</span>
           
            <span>{{v.name7}}</span>
           </p>
           <p>
               <span style="background-color: rgb(241, 136, 79);">{{v.name6}}</span>
             <span>{{v.name8}}</span>
           </p>
        

        </div>
 
        
         
       </section>



  </div>
</template>
<script>
    export default {
  // name: 'app'
  data() {
    return {
      swiperOption: {
        slidesPerView: 4,
        // spaceBetween: 30,
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      swiperOptio:{
          pagination: {
        el: '.swiper-pagination',
      },
      },

      list:[
        {
            img:"//fuss10.elemecdn.com/1/32/c75a72f674052473fb35b5c8ab1d7jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
            path:"品牌",
            name1:"北京麦当劳祈年大街餐厅",
            name2:"票",
            img2:"src/assets/QIUIRP8IWURC@45(P2RQ7EX.png",
            name3:"4.8月售4563单",
            name4:"¥0起送 配送费¥9",
            name5:"1.09km 33分钟",
            name6:"特",
            name7:"【专享玩具套餐】美味亦是正义",
            name8:"【立减22元】麦麦早餐❀家庭餐",
            day:"https://h5.ele.me/shop/#id=609937&s_type=0"


        },
        {
            img:"//fuss10.elemecdn.com/f/bf/3cdc8d5fbf543cc1df15b1cbcc00dpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
            path:"品牌",
            name1:"魏家凉皮（协和店）",
            name2:"保",
            img2:"src/assets/QIUIRP8IWURC@45(P2RQ7EX.png",
            name3:"4.8月售4563单",
            name4:"¥0起送 配送费¥9",
            name5:"1.09km 33分钟",
            name6:"特",
            name7:"【专享玩具套餐】美味亦是正义",
            name8:"",
             day:"https://h5.ele.me/shop/#id=153455327&s_type=0"


        },
         {
            img:"//fuss10.elemecdn.com/a/b3/78e4a7079948628fcf617162a6ff6jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
            path:"品牌",
            name1:"必胜客宅急送（磁器口店）",
            name2:"票",
            img2:"src/assets/QIUIRP8IWURC@45(P2RQ7EX.png",
            name3:"4.8月售4563单",
            name4:"¥0起送 配送费¥9",
            name5:"1.09km 33分钟",
            name6:"特",
            name7:"新用户下单立减17元",
            name8:"满80减20",
            day:"https://h5.ele.me/shop/#id=308607&s_type=0"


        },
         {
            img:"//fuss10.elemecdn.com/8/c9/f86e8a367e686a158f047fe62ebbcpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
            path:"",
            name1:"榴莲千层盒子",
            name2:"票",
            img2:"src/assets/QIUIRP8IWURC@45(P2RQ7EX.png",
            name3:"4.8月售4563单",
            name4:"¥0起送 配送费¥9",
            name5:"1.09km 33分钟",
            name6:"特",
            name7:"新用户下单立减17元",
            name8:"满80减20",
             day:"https://h5.ele.me/shop/#id=1357815&s_type=0"


        },
        {
            img:"//fuss10.elemecdn.com/4/6f/57c5ab77801365e60346771b85024jpeg.jpeg?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/",
            path:"",
            name1:"老磁器口烧烤店",
            name2:"票",
            img2:"src/assets/QIUIRP8IWURC@45(P2RQ7EX.png",
            name3:"4.8月售4563单",
            name4:"¥0起送 配送费¥9",
            name5:"1.09km 33分钟",
            name6:"特",
            name7:"新用户下单立减17元",
            name8:"满80减20",
             day:"https://h5.ele.me/shop/#id=153295828&s_type=0"


        }
      ]
      
      
    };
  }
};
</script>
<style lang="less">
.px2rem(@prop,@px) {
  @{prop}: @px /75 * 1rem;
}
.box{
  width: 100%;
  text-align: center;
  p{
    .px2rem(font-size,40);
    
  }
}

 .cen_{
  
   width: 100%;
   text-align: center;
   img{
     width: 90%
   }
 }
 
 .sw{
   
   display: flex;
   justify-content: space-between;
   align-items: center;
  //  margin-top: 3%;
   .div{
      width: 20%;
      text-align: center;

 
      img{
      width: 60%;
      }
    }
 }
 
.h{
  
  width: 100%;
  color: #fff;
  background: rgb(0, 145, 255);
  // z-index: 10;
  p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      .px2rem(font-size,25);
      font-weight: bold;
      
    }
  }
}
.p {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 20%;
  }
}
.inp {
  position: sticky;
  top: 0;
  z-index: 99;
  width: 100%;
  .px2rem(height,70);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  text-align: center;
  background: rgb(0, 145, 255);

  
 a{
    width:80%;
    input{
       width:80%;
       height: 90%;
    }
  }
}
.box-{
  margin-top: 0.5%;
   margin-left: 2%;
   margin-bottom: 2%;
   display: flex;
   width: 80%;
   color: #ccc;
  .div--{
    display: flex;
     width: 30%;
    img{
     width: 80%;
     height: 90%;

    }
    p{
      
    }
  }
  .rig{
    width: 70%;
    p{
      margin-top:3%;
    }
  }
}
.sww{
   background: rgb(0, 145, 255);
   color: #fff;
}.span{
        background: yellow;
        color: black;
       
      }
</style>
